<template>
	<view class="container">
		<tui-list-cell @click="upload" :arrow="true" padding="26rpx 0">
			<view class="tui-item-box">
				<text class="tui-list-cell_name">头像</text>
				<view class="tui-right">
					<tui-image-group :imageList="imageList" width="106rpx" height="106rpx"></tui-image-group>
					<image class="photo-icon" src="../../../../static/images/photo-icon.png" mode=""></image>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :arrow="false" padding="48rpx 0">
			<view class="tui-item-box">
				<text class="tui-list-cell_name">用户ID</text>
				<view class="tui-right noArrow">sfasdfsa</view>
			</view>
		</tui-list-cell>
		<tui-list-cell @click="handleName" :arrow="true" padding="48rpx 0">
			<view class="tui-item-box">
				<text class="tui-list-cell_name">昵称</text>
				<view class="tui-right">那一抹芳华</view>
			</view>
		</tui-list-cell>
		<tui-list-cell @click="handleSex" :arrow="true" padding="48rpx 0">
			<view class="tui-item-box">
				<text class="tui-list-cell_name">性别个人</text>
				<view class="tui-right">男</view>
			</view>
		</tui-list-cell>
		<tui-list-cell @click="show" :arrow="true" padding="48rpx 0">
			<view class="tui-item-box">
				<text class="tui-list-cell_name">生日</text>
				<view class="tui-right">未选择</view>
			</view>
		</tui-list-cell>
		<tui-modal :show="modal" @cancel="hide" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">昵称</view>
				<input  placeholder="请输入您的昵称" class="tui-modal-input" :class="{'tui-hidden-input':!modal}"  v-model="email" />
				<tui-button height="72rpx" :size="28" shape="circle" type="danger" @click="handleClick">立即提交</tui-button>
			</view>
		</tui-modal>
		<tui-actionsheet :show="showActionSheet" :tips="tips" :item-list="itemList" :mask-closable="maskClosable" :color="color"
		 :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
		 <tui-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="colorTime"
		  :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="change"></tui-datetime>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				type:2,
				cancelColor : '#888',
				colorTime : '#e02d3a',
				setDateTime: '',
				startYear: 1980,
				endYear : 2030,
				unitTop : false,
				radius : false,
				color: "#9a9a9a",
				size: 26,
				showActionSheet: false,
				maskClosable: true,
				isCancel: false,
				tips : "选择您的性别",
				itemList: [{
					text: "男",
					color: "#2B2B2B"
				}, {
					text: "女",
					color: "#2B2B2B"
				}, {
					text: "不公开",
					color: "#2B2B2B"
				}],
				modal: false,
				imageList: [{
					id: 0,
					src: "https://5b0988e595225.cdn.sohucs.com/images/20190708/9cd14d646662420bb9f0fad0a29e94ec.jpeg"
				}]
			}
		},
		onReady() {},
		methods: {
			upload() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'], //从相册选择
				    success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths
				        // console.log(JSON.stringify(chooseImageRes.tempFilePaths));
								let element = {
									id: 0,
									src:tempFilePaths[0]
								}
								this.imageList = []
								this.imageList.push(element)
								uni.uploadFile({
									url: 'https://api.yanglao12349.com/upload', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[0],
									name: 'file',
									formData: {
											'user': 'test'
									},
									success: (uploadFileRes) => {
											console.log(uploadFileRes.data);
									}
							});
				    }
				});
			},
			handleName () {
				this.modal = true
			},
			hide () {
				this.modal = false
			},
			handleClick() {
			},
			handleSex() {
				this.showActionSheet = true
			},
			itemClick: function(e) {
				let index = e.index;
				this.closeActionSheet();
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			show () {
				this.$refs.dateTime.show();
			},
			change (e) {
				console.log(e);
				// this.result = e.result;
			}
		},
		
	}
</script>
<style>
	page {
		background: #fafbfd;
	}
</style>
<style scoped lang="scss">
	.container {
		margin-top: 20rpx;
		padding: 0 28rpx;
		background: #fff;
		.tui-item-box {
			width: 100%;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 8rpx;
				vertical-align: middle
			}

			.tui-list-cell_name {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tui-right {
				position: relative;
				margin-left: auto;
				margin-right: 54rpx;
				font-size: 26rpx;
				color: #333;

				&.noArrow {
					margin-right: 0;
				}

				.photo-icon {
					position: absolute;
					bottom: 5rpx;
					right: 0;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
				}
			}
		}

		::v-deep {
			.tui-line-left::after {
				left: 0rpx !important;
			}

			.tui-cell-arrow::before {
				right: 0rpx !important;
			}
		}

		.loginOut {
			margin-top: 165rpx;
			text-align: center;
			font-size: 26rpx;
			color: #ff455d;
		}
		.tui-modal-custom {
			text-align: center;
		}
		.tui-prompt-title {
			padding-bottom: 20rpx;
			font-size: 34rpx;
		}
		.tui-modal-input {
			width: 80%;
			border-bottom: 1rpx solid #e6e6e6;
			margin: 30rpx auto 50rpx;
			padding-bottom: 20rpx;
			font-size: 32rpx;
		}
		.tui-hidden-input{
			/* #ifdef MP-WEIXIN */
			width: 0;
			/* #endif */
		}
	}
</style>
